<!-- public/index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>实时聊天室</title>
  </head>
  <style>
    body {
      margin: 0;
      padding: 20px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      background: #f0f2f5;
    }

    #login-container {
      max-width: 400px;
      margin: 100px auto;
      padding: 40px;
      background: white;
      border-radius: 12px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      text-align: center;
    }

    #username {
      width: 100%;
      padding: 12px;
      margin-bottom: 20px;
      border: 2px solid #e0e0e0;
      border-radius: 8px;
      font-size: 16px;
      box-sizing: border-box;
    }

    button {
      background: #0084ff;
      color: white;
      border: none;
      padding: 12px 24px;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
      transition: background 0.2s;
    }

    button:hover {
      background: #0066cc;
    }

    #chat-container {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      gap: 20px;
      height: 80vh;
    }

    #messages {
      flex: 1;
      background: white;
      border-radius: 12px;
      padding: 20px;
      overflow-y: auto;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .message {
      margin-bottom: 20px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .message.self {
      align-items: flex-end;
    }

    .message .bubble {
      max-width: 70%;
      padding: 12px 16px;
      border-radius: 18px;
      background: #f0f2f5;
      position: relative;
    }

    .message.self .bubble {
      background: #0084ff;
      color: white;
    }

    .message .meta {
      font-size: 12px;
      color: #666;
      margin: 4px 8px;
    }

    .message.self .meta {
      text-align: right;
    }

    #message-input {
      flex: 1;
      padding: 12px;
      border: 2px solid #e0e0e0;
      border-radius: 8px;
      margin-right: 10px;
    }

    #online-users {
      width: 250px;
      background: white;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    #user-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    #user-list li {
      padding: 8px 12px;
      margin: 4px 0;
      background: #f8f9fa;
      border-radius: 8px;
    }

    .system-message {
      text-align: center;
      color: #666;
      font-size: 12px;
      margin: 10px 0;
      padding: 4px;
    }

    #error-message {
      color: #ff4444;
      margin-top: 10px;
      font-size: 14px;
    }

    .input-container {
      display: flex;
      margin-top: 20px;
      padding: 20px 0;
    }
  </style>
  <body>
    <div id="login-container">
      <input type="text" id="username" placeholder="输入用户名" />
      <button onclick="handleLogin()">加入聊天室</button>
      <div id="error-message"></div>
    </div>

    <div id="chat-container" style="display: none">
      <div id="messages"></div>
      <input type="text" id="message-input" placeholder="输入消息" />
      <button onclick="sendMessage()">发送</button>
      <div id="online-users">
        <h3>在线用户 (<span id="user-count">0</span>)</h3>
        <ul id="user-list"></ul>
      </div>
    </div>

    <script src="/socket.io/socket.io.js"></script>
    <script>
      const socket = io();
      let currentUsername = "";

      // 处理登录
      function handleLogin() {
        const usernameInput = document.getElementById("username");
        currentUsername = usernameInput.value.trim();

        if (currentUsername) {
          socket.emit("set_username", currentUsername);
        }
      }

      // 事件监听
      socket.on("username_exists", (username) => {
        document.getElementById(
          "error-message"
        ).textContent = `用户名 ${username} 已存在，请更换！`;
      });

      socket.on("login_success", (data) => {
        document.getElementById("login-container").style.display = "none";
        document.getElementById("chat-container").style.display = "block";
        updateUserList(data.users);
      });

      socket.on("message", (msg) => {
        const messagesDiv = document.getElementById("messages");
        const isSelf = msg.from === currentUsername;

        messagesDiv.innerHTML += `
    <div class="message ${isSelf ? "self" : ""}">
      <div class="bubble">${msg.content}</div>
      <div class="meta">
        ${!isSelf ? msg.from : ""} 
        ${new Date(msg.timestamp).toLocaleTimeString()}
      </div>
    </div>
  `;
        messagesDiv.scrollTop = messagesDiv.scrollHeight;
      });

      // 更新用户列表
      function updateUserList(users) {
        const userList = document.getElementById("user-list");
        userList.innerHTML = users.map((user) => `<li>${user}</li>`).join("");
        document.getElementById("user-count").textContent = users.length;
      }

      // 发送消息
      function sendMessage() {
        const input = document.getElementById("message-input");
        const message = input.value.trim();

        if (message) {
          socket.emit("new_message", message);
          input.value = "";
        }
      }

      // 处理用户加入/离开
      socket.on("user_joined", (username) => {
        addSystemMessage(`${username} 加入了聊天室`);
      });

      socket.on("user_left", (username) => {
        addSystemMessage(`${username} 离开了聊天室`);
      });

      function addSystemMessage(content) {
        const messagesDiv = document.getElementById("messages");
        messagesDiv.innerHTML += `
                <div class="system-message">
                    <em>${content}</em>
                </div>
            `;
      }
    </script>
  </body>
</html>
